<template>
    <div class="yuan-container generalDetailClassList" style="border:solid 1px #eee;padding:10px;border-radius:8px">
        <div class="filter-panel" style="margin-bottom:10px;text-align:right" v-if="!isShow">
            <a-button type="primary" @click="add">新增分类</a-button>
        </div>
        <a-table bordered :rowKey="(item,i)=>item.storeId" :columns="columns" :data-source="pageList" :pagination="false">
            <template slot='action' slot-scope="text, record, index">
                <div>
                    <a-button type="danger" @click="clickDelete(record,index)">删除</a-button>
                </div>
            </template>
            <template slot='getRow' slot-scope="text, record, index">
                <div>
                    <a-input type="text" v-model="record.usageLimit" placeholder="请输入数量" />
                </div>
            </template>
        </a-table>
        <a-modal width="1000px" title="选择分类" :visible="agencyListVisible" @cancel="agencyListVisible=false"
            class="yuan-container">
            <a-spin tip="Loading..." :spinning="agencyListLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :label-col="{ style: { width: '150px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">

                    <div class="form-panel yuan-form-col5">
                        <div class="form-panel-box">
                            <div class="form-title">分类信息</div>
                            <a-form-model-item class="yuan-form-item" label="商品分类">
                                <a-cascader class="yuan-form-input" style="max-width:500px" :options="categoryData"
                                    :changeOnSelect="true" placeholder="请选择商品分类" @change="onCategoryChange" />
                            </a-form-model-item>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <a-button @click="agencyListVisible=false">关闭</a-button>
                <a-button type="primary" @click="clickAdd">确认</a-button>
            </template>
        </a-modal>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import api from "@/api/api";
import marketApi from "@/api/marketApi";
import shopMallApi from "@/api/shopMallApi";
@Component({
    name: "tpl",
    components: { UploadVue },
})
export default class extends Vue {
    @Prop({ default: () => [] }) defaltData!: any;
    @Prop({ default: false }) isShow!: boolean;
    @Watch("defaltData")
    defaltDataChange() {
        if (this.defaltData) {
            this.pageList = this.defaltData.map((item) => ({ ...item }));
        }
    }
    columns:any[] = [
        {
            align: "center",
            dataIndex: "categoryId",
            key: "categoryId",
            title: "分类编号",
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "分类名称",
        },
        {
            align: "center",
            dataIndex: "level",
            key: "level",
            title: "级别",
        },
    ];
    pageList: any[] = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    async mounted() {
        if (this.defaltData) {
            this.pageList = this.defaltData.map((item) => ({ ...item }));
        }
        if (!this.isShow) {
            this.columns.push({
                align: "center",
                dataIndex: "action",
                key: "action",
                title: "操作",
                width: 200,
                scopedSlots: { customRender: "action" },
            });
        }
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }
    agencyList = [];
    async getList() {}
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }

    agencyListVisible = false;
    agencyListLoading = false;
    async add() {
        this.agencyListVisible = true;
        if (this.agencyList.length === 0) {
            await this.getAgencyList();
        }
    }

    agencyPagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.agencyPageChange,
    };
    agencyPageParams: any = {};
    agencyPageChange(page: number, pageSize: number) {
        this.agencyPagination.pageSize = pageSize;
        this.agencyPagination.current = page;
        this.getAgencyList();
    }
    categoryData: any[] = [];
    async getAgencyList() {
        if (this.categoryData.length > 0) return;
        this.agencyListLoading = true;
        try {
            const res = await shopMallApi.getClassifyList({});
            const rows = res.data?.rows || [];
            const data = {};
            rows.forEach((item) => {
                if (item.level === "一级") {
                    if (data[item.id]) {
                        data[item.id].label = item.name;
                    } else {
                        data[item.id] = {
                            value: item.id,
                            label: item.name,
                            children: [],
                        };
                    }
                } else {
                    if (data[item.parentId]) {
                        data[item.parentId].children.push({ value: item.id, label: item.name });
                    } else {
                        data[item.parentId] = {
                            value: item.parentId,
                            label: "",
                            children: [{ value: item.id, label: item.name }],
                        };
                    }
                }
            });
            const dataArr: any[] = [];
            for (let i in data) {
                dataArr.push(data[i]);
            }
            this.categoryData = dataArr;
        } finally {
            this.agencyListLoading = false;
        }
    }

    resetAgencyList() {
        this.agencyPagination.current = 1;
        this.getAgencyList();
    }
    dateChange(e: any[]) {
        const arr = e.map((item) => item.format("YYYY-MM-DD"));
        this.agencyPageParams.createStartTime = arr[0] + " 00:00:01";
        this.agencyPageParams.createEndTime = arr[1] + " 23:59:59";
        this.resetList();
    }

    clickAdd() {
        const find = this.pageList.find((findPage) => {
            return findPage.categoryId === this.selCategoryData.categoryId;
        });
        if (find) {
            this.$message.warning("该分类已经添加");
            return;
        }
        this.pageList.push({ ...this.selCategoryData });
        this.agencyListVisible = false;
    }
    clickDelete(item, idx) {
        this.pageList.splice(idx, 1);
    }
    getPageData() {
        return this.pageList;
    }
    selCategoryData: any = {};
    onCategoryChange(e) {
        let dataList = [...this.categoryData];
        let data: any = {};
        if (e && e.length > 0) {
            e.forEach((item) => {
                const find = dataList.find((listOne) => listOne.value === item);
                data = find;
                dataList = find.children;
            });
        }
        this.selCategoryData = {
            categoryId: data.value,
            name: data.label,
            level: e.length,
        };
    }
}
</script>

